<script lang="ts" setup>
import SuperTable from "@/module/table/superTable.vue";
import {ref} from "vue";
import {Page} from "@/common/Page.ts";
import {CarBo, CarSearchBo, CarVo} from "@/dto/Car/Car.ts";
import SuperDialog from "@/module/dialog/superDialog.vue";
import SuperButton from "@/module/button/superButton.vue";
import CarApi from "@/api/car/CarApi.ts";
import Upload from "@/module/upload/upload.vue";
import {UserVo} from "@/dto/User/User.ts";
import UserApi from "@/api/user/UserApi.ts";
import SelectVo from "@/common/SelectVo.ts";
import {ElMessage} from "element-plus";
import {FileVo} from "@/dto/file/File.ts";
import {deletedMessage} from "@/util/FunctionUtil.ts";

const initTable = ref<Array<CarVo>>([])
const selectionCarVo = ref<Array<CarVo>>([])
const userOption = ref<Array<SelectVo<string, number>>>([])
const pageConfig = ref(Page.initPage)
const editDialog = ref(false)
const carSearchBo = ref(new CarSearchBo())
const carVo = ref(new CarVo())
const carBo = ref(new CarBo())
const carApi = ref(new CarApi())
const userApi = ref(new UserApi())

async function initTableData(page: Page) {
    carSearchBo.value = new CarSearchBo(page.pageSize, page.page)
    let result = await carApi.value.pageAll(carSearchBo.value)
    initTable.value = result.data?.content ?? []

    let userResult = await userApi.value.option()
    userOption.value = userResult.data ?? []
    pageConfig.value = new Page(page.page, page.pageSize, <number>result.data?.totalPages, <number>result.data?.totalElements)
}

function add() {
    carVo.value = new CarVo()
    editDialog.value = true
}

function edit(row: CarVo) {
    carVo.value = {...row}
    editDialog.value = true
}

async function save() {
    let result = await carApi.value.edit(carBo.value.fromVo(carVo.value))
    await initTableData(pageConfig.value)
    editDialog.value = false
}

async function deleted(row: CarVo) {
    deletedMessage(
        async function () {
            carSearchBo.value.id = row.id
            let result = await carApi.value.deleted(carSearchBo.value)
            ElMessage.success("删除成功")
            await initTableData(pageConfig.value)
        }
    )
}

async function deletedAll() {
    deletedMessage(
        async function () {
            let searchList = selectionCarVo.value.map(item => {
                let search = new CarSearchBo()
                search.id = item.id
                return search
            })
            let result = await carApi.value.deletedAll(searchList)
            ElMessage.success("删除成功")
            await initTableData(pageConfig.value)
        }
    )
}

function selection(valList: Array<CarVo>) {
    selectionCarVo.value = valList as Array<CarVo>
}
</script>

<template>
    <super-table
            :page="pageConfig"
            :data="initTable"
            :column-list="CarVo.getColumn()"
            @init="initTableData"
            @selection="selection"
    >
        <template #header-button>
            <super-button
                    type="success"
                    title="添加"
                    @click="add"/>
            <super-button
                    type="danger"
                    title="删除全部"
                    @click="deletedAll"
            />
        </template>
        <template #column="{row,column}">
            <template v-if="column.prop == 'image'">
                <el-image :src="FileVo.getUploadUrl(row[column.prop])"/>
            </template>
        </template>
        <template #controls="{row}">
            <super-button title="编辑" type="success" @click="edit(row)"/>
            <super-button title="删除" type="danger" @click="deleted(row)"/>
        </template>
    </super-table>
    <super-dialog
            v-model="editDialog"
            title="添加"
            width="500"
    >
        <template #context>
            <el-form>
                <el-form-item label-width="70" label="车辆图片">
                    <upload v-model="carVo.image" type="image"/>
                </el-form-item>
                <el-form-item label-width="70" label="车牌号">
                    <el-input v-model="carVo.plate"/>
                </el-form-item>
                <el-form-item label-width="70" label="车辆品牌">
                    <el-input v-model="carVo.brand"/>
                </el-form-item>
                <el-form-item label-width="70" label="车辆系列">
                    <el-input v-model="carVo.series"/>
                </el-form-item>
                <el-form-item label-width="70" label="所属人">
                    <el-select v-model="carVo.userId">
                        <el-option
                                v-for="user in userOption"
                                :label="String(user.label)"
                                :value="user.value"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <super-button
                    title="取消"
                    type="info"
                    @click="editDialog = false"
            />
            <super-button
                    title="保存"
                    type="success"
                    @click="save"
            />
        </template>
    </super-dialog>
</template>

<style scoped>

</style>